<template>
  <div class="purviewbox">
    <template v-if="data.length">
      <div class="tr">
        <el-button type="primary" @click.stop="save">保 存</el-button>
        <el-button @click.stop="cancel">取 消</el-button>
      </div>
      <div class="module-item module-item-0">
        <div class="mname">
          <div class="inner">
            <input type="checkbox" @click.stop="selAll" /> 全选
          </div>
        </div>
        <div class="cl"></div>
      </div>
      <div
        :class="'module-item module-item-' + (item.pid ? '1':'0')"
        v-for="(item, index) in data"
        :key="index"
      >
        <div class="mname">
          <div class="inner">
            <input type="checkbox" v-model="item.is_check" @click.stop="selAllPid(item)" />
            {{ item.name }}
          </div>
        </div>
        <div class="maction" v-if="item.action && item.action.length > 0">
          <span class="span-action" v-for="(ac, index1) in item.action" :key="index1">
            <input type="checkbox" v-model="ac.is_check" />
            {{ ac.name }}
          </span>
          <div class="cl"></div>
        </div>
        <div class="cl"></div>
      </div>
      <div class="cl"></div>
    </template>
    <template v-if="noData">
      <div class="warn">
        <i class="el-icon-warning f100"></i>
      </div>
      <div class="tc f16">暂无权限信息</div>
    </template>
  </div>
</template>
<script>
export default {
  props: ["id"],
  data() {
    return {
      data: [],
      noData: false
    };
  },
  watch: {
    id: {
      handler(val) {
        this.noData = false;
        this.init(val);
      }
    }
  },
  methods: {
    initDataFormat(data) {
      let level = {};
      let temp = [];
      let arrTotal = [];
      console.log(data);
      if (!data.length) {
        this.noData = true;
      }
      data.forEach((el, inx) => {
        if (el.pid === 0) {
          level[el.id] = [];
          level[el.id].push(el);
        } else {
          temp.push(el);
        }
      });
      temp.forEach(el => {
        for (const key in level) {
          if (el.pid === Number(key)) {
            level[key].push(el);
          }
        }
      });
      for (const key in level) {
        arrTotal.push.apply(arrTotal, level[key]);
      }
      this.data = arrTotal;
    },
    init(id) {
      this.data = [];

      if (!id) {
        return false;
      }
      this.$api.jget("system.get_role_purview", { id: id }).then(res => {
        if (res.status === 1) {
          this.initDataFormat(res.data || []);
        } else {
          this.$error(res.msg);
        }
      });
    },
    cancel() {
      this.noData = false;
      this.$emit("cancel");
    },
    selAllPid(item) {
      let that = this;
      setTimeout(function() {
        let checked = item.is_check;
        if (item.action) {
          item.action.map(function(act) {
            act.is_check = checked;
          });
        }
        that.data.map(function(mod) {
          if (mod.pid == item.id) {
            mod.is_check = checked;
            that.selAllPid(mod);
          }
        });
      }, 50);
    },
    selAll(e) {
      let checked = e.target.checked;
      this.data.map(function(item) {
        item.is_check = checked;
        if (item.action) {
          item.action.map(function(act) {
            act.is_check = checked;
          });
        }
      });
    },
    fetchSel(field = "path") {
      let res = [];
      this.data.forEach(item => {
        if (item.is_check) {
          res.push(item[field]);
        }
        if (item.action) {
          item.action.map(function(act) {
            if (act.is_check) {
              res.push(act[field]);
            }
          });
        }
      });
      return res;
    },
    save() {
      const params = {
        id: this.id,
        data: this.fetchSel()
      };
      this.$api
        .jpost("system.save_role_purview", params)
        .then(res => {
          if (res.status === 1) {
            this.$success(res.msg);
            this.$emit("success");
          } else {
            this.$error(res.msg);
          }
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.init(this.id);
  }
};
</script>

<style lang="scss" scoped>
.warn {
  display: flex;
  justify-content: center;
}
.module-item {
  height: 48px;
  line-height: 48px;
  font-size: 12px;
  clear: both;
}
.module-item input[type="checkbox"] {
  position: relative;
  top: 3px;
}
.module-item-0 {
  border-bottom: solid 1px #f3f3f3;
}
.module-item .mname {
  width: 30%;
  float: left;
}
.module-item .maction {
  width: 70%;
  float: left;
}
.module-item .maction span.span-action {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  width: 200px;
}
.module-item-0 .mname .inner {
  font-size: 14px;
  padding-left: 3px;
  font-weight: 700;
}
.module-item-1 .mname .inner {
  font-size: 14px;
  padding-left: 26px;
  font-weight: 400;
}
.module-item-2 .mname .inner {
  font-size: 13px;
  padding-left: 49px;
  font-weight: 400;
}
.module-item-3 .mname .inner {
  font-size: 12px;
  padding-left: 72px;
  font-weight: 400;
}
</style>
